<template>
  <div style="height: 100%">
    <el-card shadow="never" class="portal-todoList-box box">
      <div class="arrows" @click="goMoreList()" style="cursor: pointer">
        <p>
          <i class="el-icon-right"></i>
          更多
        </p>
      </div>
      <div slot="header" class="portal-common-title">
        <!-- <el-badge :value="list.length" v-if="list.length > 0" class="item"> -->
        <span>{{ title }}</span>
        <!-- </el-badge>
        <span v-else>{{ title }}</span> -->
        <!-- <i>{{ " " + "(" + this.list.length + ")" }}</i> -->
      </div>
      <div class="portal-todoList-box-body">
        <template v-if="list.length">
          <a
            class="item com-hover"
            @click="goDetail(item, i)"
            v-for="(item, i) in list"
            :key="i"
          >
            <img
              v-if="
                item.isRead != 1 && setApi == '/api/visualdev/Dashboard/Notice'
              "
              class="new_notice"
              src="@/assets/images/new-Notice.png"
              alt=""
            />
            <span class="name" v-if="item.fullName">{{ item.fullName }}</span>
            <span class="name" v-else>{{ item.customerName }}</span>
            <span class="time">{{
              item.creatorTime | toDate("yyyy-MM-dd")
            }}</span>
          </a>
          <!-- <p class="noData-txt">{{ "api" + api }}</p> -->
        </template>
        <div class="portal-common-noData" v-else>
          <img
            src="@/assets/images/portal-nodata.png"
            alt=""
            class="noData-img"
          />
          <p class="noData-txt">{{ text.desc }}</p>
          <!-- <p class="noData-txt">{{ "api" + api }}</p>
          <p class="noData-txt">{{ "propsApi" + propsApi }}</p>
          <p class="noData-txt">{{ "value" + selectValue }}</p> -->
        </div>
      </div>
    </el-card>
    <Form v-if="formVisible" ref="Form" />
  </div>
</template>
<script>
import request from "@/utils/request";
import Form from "@/views/basic/messageRecord/Form.vue";
export default {
  components: { Form },
  props: {
    title: { type: String, default: "" },
    api: { type: String, default: "" },
    propsApi: { type: String, default: "" },
    selectValue: { type: String, default: "" },
  },
  data() {
    return {
      list: [],
      setApi: "",
      text: {
        desc: "暂无数据",
        routesLink: "",
      },
      formVisible: false,
    };
  },
  watch: {
    selectValue() {
      switch (this.selectValue) {
        case "notice":
          // this.api = "/api/notice";
          this.$emit("setApivalue", "/api/visualdev/Dashboard/Notice");
          this.setApi = "/api/visualdev/Dashboard/Notice";
          this.getData();
          this.text = {
            desc: "暂无公告",
            routesLink: "",
          };
          // console.log("公告");
          break; //停止执行，跳出switch
        case "unread":
          this.$emit("setApivalue", "/api/visualdev/Dashboard/Email");
          this.setApi = "/api/visualdev/Dashboard/Email";
          // console.log("未读消息");
          this.text = {
            desc: "暂无邮箱",
            routesLink: "",
          };
          this.getData();
          break; //停止执行，跳出switch
        case "todo":
          this.$emit("setApivalue", "/api/visualdev/Dashboard/FlowTodo");
          this.setApi = "/api/visualdev/Dashboard/FlowTodo";
          this.text = {
            desc: "暂无待办事项",
            routesLink: "",
          };
          this.getData();
          break; //停止执行，跳出switch
        case "bisness":
          this.$emit("setApivalue", "/api/crm/CrmCustomerOpportunity/getList");
          this.setApi = "/api/crm/CrmCustomerOpportunity/getList";
          this.text = {
            desc: "暂无商机",
            routesLink: "",
          };
          this.getData();
          // console.log("商机数据");
          break; //停止执行，跳出switch
        default: //上述条件都不满足时，默认执行的代码
          console.log("空");
      }
    },
    api() {
      // console.log("dddddddddddddddddddddddddddddddddddddddddd");
      this.$nextTick(() => {
        this.setApi = this.api;
      });
      this.getData();
    },
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$nextTick(() => {
        this.setApi = this.api;
        console.log(this.api);
        if (this.setApi === "") {
          this.setApi = "/api/visualdev/Dashboard/Notice";
        }
        if (this.setApi.indexOf("getList") != -1) {
          request({
            url: `${this.setApi}`,
            method: "post",
            data: {
              switchType: "examine",
            },
          }).then((res) => {
            console.log(res);
            if (res.data.list) {
              this.list = res.data.list;
            }
          });
        } else {
          request({
            url: `${this.setApi}`,
            method: "get",
          })
            .then((res) => {
              console.log(res);
              if (res.data.list) {
                this.list = res.data.list;
              }
            })
            .catch(() => {
              console.log("错误");
            });
        }
      });
    },
    goDetail(item, i) {
      console.log(item, '-----+++++');
      if (this.setApi == "/api/visualdev/Dashboard/FlowTodo") {
        // 待办事项
        item.taskId = item.id
        item.id = item.processId
        // item.taskOperatorId = "535729389187400036"
        let config = JSON.stringify(item);
        const Base64 = require("js-base64").Base64;
        this.$router.push(
          "/workFlowDetail?config=" + encodeURIComponent(Base64.encode(config))
        );
      }
      if (this.setApi == "/api/crm/CrmCustomerOpportunity/getList") {
        // 商机待审核数据
        this.$router.push({
          path: "/crm/crmcustomeropportunity",
          query: {
            id: item.id,
          },
        });
      }

      if (this.setApi == "/api/visualdev/Dashboard/Notice") {
        console.log("-------");
        // 公告
        this.formVisible = true;
        this.list[i].isRead = 1;
        // console.log()
        this.$nextTick(() => {
          this.$refs.Form.init(item.id);
        });

        // this.$router.push({
        //   path: `/messageRecord?type=${1}&id=` + item.id,
        // });
      }
    },
    // 更多跳转列表
    goMoreList() {
      if (this.setApi == "/api/visualdev/Dashboard/FlowTodo") {
        // 待办事项
        // 跳转到客户审核
        this.$router.push({
          path: "/workFlow/flowTodo",
        });
      }
      if (this.setApi == "/api/crm/CrmCustomerOpportunity/getList") {
        // 商机待审核数据
        this.$router.push({
          path: "/crm/crmcustomeropportunity",
        });
      }

      if (this.setApi == "/api/visualdev/Dashboard/Notice") {
        // 公告
        this.$router.push({
          path: "/messageRecord?type=" + 1,
        });
      }
    },
    // initData() {
    //   this.listLoading = true;
    //   let type = 1;
    //   this.listQuery.appid = this.$route.query.appid;
    //   let data = {
    //     ...this.listQuery,
    //     keyword: '',
    //     type,
    //   };
    //   this.list = [];
    //   getMessageList(data).then((res) => {
    //     this.list = res.data.list;
    //     this.total = res.data.pagination.total;
    //     this.listLoading = false;
    //   });
    // },
  },
};
</script>

<style scoped lang="scss">
.box {
  // max-height: 330px;
  position: relative;

  .arrows {
    box-sizing: border-box;
    // width: 98%;
    height: 25px;
    line-height: 25px;
    background-color: #fff;
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 14px;
    color: rgb(24, 144, 255);
    text-align: right;
  }

  .portal-todoList-box-body {
    overflow: auto;
    // max-height: 285px;
    // min-height: 285px;
    height: 232px;
    background-color: white;
    .com-hover {
      position: relative;
    }
    // .name {
    //   width: calc(100% - 110px);
    // }
    // .time {
    //   // float: right;
    // }
  }
  >>> .el-badge__content.is-fixed {
    position: absolute;
    top: -3px;
    right: 5px;
    line-height: 16px;
  }
  .portal-common-noData {
    padding: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .new_notice {
    height: 18px;
    position: absolute;
    position: absolute;
    left: -12px;
    top: -3px;
  }
}
</style>